<template>
  <div class="index">
  <!-- 内容区 -->
    <div class="container" ref="container">
      <div>
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) of bannerImg" :key="index">
            <img :src="item" alt="">
          </van-swipe-item>
        </van-swipe>
        <!-- 首页导航 -->
        <nav class="nav">
          <div class="item" v-for="(item, index) of navImg" :key="index">
            <a href="#">
              <img :src="item" alt="">
            </a>
          </div>
        </nav>
        <!-- 活动 -->
        <div class="active">
          <div class="item">
            <a href="#">
              <img src="../../../assets/images/active1.png" alt="">
              <img src="../../../assets/images/active2.png" alt="">
            </a>
          </div>
          <div class="item">
            <a href="#">
              <img src="../../../assets/images/active3.png" alt="">
            </a>
          </div>
          <div class="item">
            <a href="#">
              <img src="../../../assets/images/active4.png" alt="">
              <img src="../../../assets/images/active5.png" alt="">
            </a>
          </div>
        </div>
        <!-- 品牌 -->
        <div class="brand">
          <div class="title">
            <img src="../../../assets/images/title0.png" alt="">
          </div>
          <div class="item" v-for="(item, index) of brandImg" :key="index">
            <img :src="item" alt="">
          </div>
        </div>
        <!-- 运动生活 -->
        <div class="sport">
          <div class="title">
            <img src="../../../assets/images/title1.png" alt="">
          </div>

          <div class="item" v-for="i in 4" :key="i">
            <a href="#">
              <img src="../../../assets/images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
              <div class="price">
                <span>￥499</span>
                <s>￥599</s>
              </div>
              <button>立即购买</button>
            </a>
          </div>
        </div>
        <!-- 女士专栏 -->
        <div class="sport">
          <div class="title">
            <img src="../../../assets/images/title2.png" alt="">
          </div>

          <div class="item" v-for="i in 4" :key="i">
            <a href="#">
              <img src="../../../assets/images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
              <div class="price">
                <span>￥499</span>
                <s>￥599</s>
              </div>
              <button>立即购买</button>
            </a>
          </div>
        </div>
        <!-- 男士专栏 -->
        <div class="sport">
          <div class="title">
            <img src="../../../assets/images/title3.png" alt="">
          </div>

          <div class="item" v-for="i in 4" :key="i">
            <a href="#">
              <img src="../../../assets/images/product.jpg" alt="">
              <p>adidas阿迪达斯 男式 场下休闲篮球鞋S83700</p>
              <div class="price">
                <span>￥499</span>
                <s>￥599</s>
              </div>
              <button>立即购买</button>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入滚动插件
import BScroll from 'better-scroll'
export default {
  name: 'HomeIndex',
  mounted () {
    this.scroll = new BScroll(this.$refs.container)
  },
  data () {
    return {
      bannerImg: [
        require('../../../assets/images/banner1.png'),
        require('../../../assets/images/banner2.png'),
        require('../../../assets/images/banner3.png'),
        require('../../../assets/images/banner4.png'),
        require('../../../assets/images/banner5.png'),
        require('../../../assets/images/banner6.png'),
        require('../../../assets/images/banner7.png'),
        require('../../../assets/images/banner8.jpg'),
        require('../../../assets/images/banner9.png')
      ],
      navImg: [
        require('../../../assets/images/nav1.png'),
        require('../../../assets/images/nav2.png'),
        require('../../../assets/images/nav3.png'),
        require('../../../assets/images/nav4.png'),
        require('../../../assets/images/nav5.png'),
        require('../../../assets/images/nav6.png')
      ],
      brandImg: [
        require('../../../assets/images/brand1.png'),
        require('../../../assets/images/brand2.png'),
        require('../../../assets/images/brand3.png'),
        require('../../../assets/images/brand4.png'),
        require('../../../assets/images/brand5.png'),
        require('../../../assets/images/brand6.png'),
        require('../../../assets/images/brand7.png'),
        require('../../../assets/images/brand8.png')
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  // 内容区
  .container {
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow: hidden;
    // 轮播图
    .van-swipe {
      height: 235px;
      .van-swipe-item {
        height: 100%;
        img {
          width: 100%;
        }
      }
    }
    // 导航
    .nav {
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      margin-top: 10px;
      padding: 0 10px;
      .item {
        width: 33.33%;
        // 去除 a 标签之间的默认间距
        font-size: 0;
        a {
          display: block;
          img {
            width: 100%;
          }
        }
      }
    }
    // 活动
    .active {
      box-sizing: border-box;
      padding: 0 10px;
      margin-top: 10px;
      overflow: hidden;
      .item {
        font-size: 0;
        width: 67%;
        float: left;
        a {
          display: block;
          img {
            width: 50%;
          }
        }
        &:nth-child(2) {
          float: right;
          width: 33%;
          img {
            width: 100%;
          }
        }
      }
    }
    // 品牌
    .brand {
      margin-top: 10px;
      overflow: hidden;
      .title {
        img {
          width: 100%;
        }
      }
      .item {
        width: 25%;
        float: left;
        img {
          width: 100%;
        }
      }
    }
    // 运动生活
    .sport {
      margin-top: 10px;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      .item {
        padding: 10px;
        width: 50%;
        box-shadow: 5px 5px 5px #f1f1f1;
        a {
          color: #666;
          font-size: 14px;
          text-align: center;
          .price {
            margin: 5px;
            span {
              color: red;
              padding: 10px;
            }
          }
          button {
            display: block;
            width: 100%;
            margin: 0 auto;
            border: 1px solid #006699;
            color: #fff;
            padding: 3px 10px;
            background-color: #046698;
          }
        }
      }
    }
  }
}
</style>
